{% extends "base.html" %}

{% block title %}结账 - 农场{% endblock %}

{% block content %}
    <h1 class="text-3xl font-bold mb-6">结账</h1>
    
    <div class="md:flex gap-8">
        <!-- 收货信息 -->
        <div class="md:w-1/2">
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-bold mb-4">收货信息</h2>
                <form action="{{ url_for('checkout') }}" method="post">
                    <div class="mb-4">
                        <label for="address" class="block text-gray-700 mb-2">详细地址</label>
                        <textarea id="address" name="address" rows="3" required
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="mb-6">
                        <label for="phone" class="block text-gray-700 mb-2">联系电话</label>
                        <input type="tel" id="phone" name="phone" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <!-- 支付方式 -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-3">支付方式</h3>
                        <div class="space-y-2">
                            <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment" value="wechat" checked class="mr-3">
                                <i class="fa fa-weixin text-green-500 text-xl mr-2"></i>
                                <span>微信支付</span>
                            </label>
                            <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment" value="alipay" class="mr-3">
                                <i class="fa fa-credit-card text-blue-500 text-xl mr-2"></i>
                                <span>支付宝</span>
                            </label>
                            <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment" value="card" class="mr-3">
                                <i class="fa fa-credit-card text-purple-500 text-xl mr-2"></i>
                                <span>银行卡</span>
                            </label>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn-primary w-full">
                        提交订单
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 订单摘要 -->
        <div class="md:w-1/2">
            <div class="bg-white rounded-lg shadow-md p-6 sticky top-24">
                <h2 class="text-xl font-bold mb-4">订单摘要</h2>
                
                <div class="space-y-4 mb-6 max-h-60 overflow-y-auto pr-2">
                    {% for item in cart_items %}
                        <div class="flex justify-between py-2 border-b border-gray-100">
                            <div class="flex items-center">
                                <img src="{{ item['image_url'] }}" alt="{{ item['name'] }}" class="h-12 w-12 rounded-md object-cover mr-3">
                                <div>
                                    <p class="text-sm font-medium">{{ item['name'] }}</p>
                                    <p class="text-sm text-gray-500">x{{ item['quantity'] }}</p>
                                </div>
                            </div>
                            <p class="text-sm font-medium">¥{{ "%.2f"|format(item['price'] * item['quantity']) }}</p>
                        </div>
                    {% endfor %}
                </div>
                
                <div class="flex justify-between py-2 border-t border-gray-200">
                    <span class="text-gray-600">商品总价</span>
                    <span>¥{{ "%.2f"|format(total) }}</span>
                </div>
                <div class="flex justify-between py-2 border-t border-gray-200">
                    <span class="text-gray-600">运费</span>
                    <span>免费</span>
                </div>
                <div class="flex justify-between py-4 font-bold text-lg border-t border-gray-200 mt-2">
                    <span>总计</span>
                    <span class="text-red-600">¥{{ "%.2f"|format(total) }}</span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
